<template>
    <dialog ref="videoDialog">
        <img :src="addr" alt="监控视频">
        <button @click="closeVideoDialog">Close</button>
    </dialog>
    <div>
        <div class="loginPart">
            <!-- <input v-model="searchName" placeholder="Search by name" type="text" /> -->
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <th>camera_id</th>
                            <th>time</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in numberedFilteredList" :key="index">
                            <td>{{ item.camera_id }}</td>
                            <td>{{ item.time }}</td>
                            <td>
                                <button @click="toggleEditMode(index)">
                                    查看监控视频
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, computed, nextTick } from 'vue';
import { useUserStore } from '../../stores/index'

const userStore = useUserStore()

const videoDialog = ref<HTMLDialogElement | null>(null);
const addr = ref('');

const list = ref([]);

const fetchData = async () => {
    try {
        const response = await axios.get("http://127.0.0.1:8000/api/show_monitor", {
            headers: {
                'token': userStore.token
            },
            timeout: 3000
        });
        list.value = response.data.list.map(item => ({
            ...item,
            camera_id: item.camera_id,
            time: item.time,
            video: item.video,
        }));
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

fetchData();

const searchName = ref('');

const filteredList = computed(() => {
    if (searchName.value === '') {
        return list.value;
    } else {
        return list.value.filter(item =>
            item.camera_id.toString().includes(searchName.value.toLowerCase())
        );
    }
});

const numberedFilteredList = computed(() => {
    return filteredList.value.map((item, index) => ({
        ...item,
        index: index + 1,
    }));
});

const toggleEditMode = (index: number) => {
    const item = filteredList.value[index];
    addr.value = item.video.replace(/.*?\/data_video\//, 'http://localhost:8000/videos/');
    if (videoDialog.value) {
        videoDialog.value.showModal();
    }
};

const closeVideoDialog = () => {
    if (videoDialog.value) {
        videoDialog.value.close();
    }
};
</script>

<style scoped>
.loginPart {
    width: 80%;
    max-width: 800px;
    padding: 40px;
    background-color: #f1f1f1;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    height: 300px;
}

.table-container {
    width: 100%;
    margin: 0 auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f2f2f2;
}

th,
td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #3498db;
    color: white;
}

td input[type="text"],
td input[type="number"],
td select {
    width: 100%;
    padding: 5px;
    border: none;
    border-radius: 3px;
    background-color: #eaf8ff;
}

td input[type="text"]:disabled,
td input[type="number"]:disabled,
td select:disabled {
    background-color: #f2f2f2;
}
</style>
